import { defineComponent, ref } from 'vue';
import { useVModels } from '@vueuse/core';
import { Popup, Field, Button } from 'vant';

import('./DeckDescPopup.less');

export default defineComponent({
  name: 'DeckDescPopup',
  props: {
    show: {
      type: Boolean as PropType<boolean>,
      required: true,
      default: () => {
        return false;
      },
    },
    desc: {
      type: String as PropType<string>,
      required: true,
    },
  },
  emits: ['update:show', 'modifyDeckDesc'],
  setup(props, { emit }) {
    const { show } = useVModels(props, emit);
    const deckDesc = ref(props.desc);

    return () => (
      <Popup
        closeable={false}
        teleport={'body'}
        round
        v-model={[show.value, 'show']}
        class={'modify-desc-popup'}
        onOpen={() => {
          deckDesc.value = props.desc;
        }}
      >
        <h1 class={'text-sm'}>编辑描述</h1>
        <Field
          v-model={[deckDesc.value]}
          type={'textarea'}
          class={'border-1 rounded mt-20px'}
          placeholder='请输入备注内容'
          showWordLimit
          rows={3}
        />
        <div class={'button-box flex mt-lg'}>
          <Button
            plain
            block
            type='primary'
            class={'!w-228px !mr-lg'}
            onClick={() => {
              show.value = false;
            }}
          >
            取消
          </Button>
          <Button
            type='primary'
            block
            class={'flex-1'}
            onClick={() => {
              emit('modifyDeckDesc', deckDesc.value);
              show.value = false;
            }}
          >
            确认
          </Button>
        </div>
      </Popup>
    );
  },
});
